<template>
    <div class="mapInfo">
        <div id="Info"></div>
    </div>
</template>

<script>
import AMap from 'AMap'
import defImg from '../assets/img/default.png'
export default {
    name: "mapInfo",
    props: ["position"],
    data() {
        return {
            map: null,
        }
    },
    mounted() {
        this.mapInitialize(this.position);
    },
    beforeUnmount() {
        console.log("组件卸载之前");
        this.map.destroy();
    },
    unmounted() {
        console.log("组件被卸载")
        //this.map().destroy();
    },
    methods: {
        mapInitialize(position) {
            console.log(position[0])
            let inglats = null;
            if(position[0] === 120.411512 && position[1] === 30.865847) {
                inglats = [
                    [120.411163,30.865515],
                    [120.411458,30.865612],
                    [120.411346,30.866238],
                    [120.41133,30.865704]
                ]
            }else if(position[0] === 120.403683 && position[1] === 30.868016) {
                inglats = [
                    [120.40359,30.868251],
                    [120.403682,30.86791],
                    [120.40351,30.868499],
                    [120.404052,30.868094]
                ]
            }else if(position[0] === 120.424443 && position[1] === 30.863161) {
                inglats = [
                    [120.424143,30.862944],
                    [120.424169,30.863483],
                    [120.424963,30.863161],
                    [120.425087,30.863041],
                    [120.424373,30.863612]
                ]
            }
            this.map = new AMap.Map("Info", {
                resizeEnable: true,
                mapStyle: "amap://styles/darkblue",
                center: position,
                zoom: 19
            });
            this.getMarker(inglats)
        },
        /* 获取点标记 */
        getMarker(inglats) {
            console.log(inglats);
            //let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(-1, -30)});
            let icon = new AMap.Icon({
                size: new AMap.Size(25 , 34),
                image: defImg,
                /* imageOffset: new AMap.Pixel(0, -60), */
                imageSize: new AMap.Size(25 , 34),
            });
            console.log(icon)
            for(let i = 0; i < inglats.length; i++) {
                let marker = new AMap.Marker({
                    icon: icon,
                    position: inglats[i],
                    /* offset: new AMap.Pixel(0 , 0) */
                    offset: new AMap.Pixel(-14, -30)
                })
                this.map.add(marker)
            }
        }
    }
}
</script>

<style scoped>
.mapInfo {
    width: 75%;
    height: 75%;
    color: #fff;
    background-color: #071A43;
    /* background-color: rgba(7, 26, 67, .8); */
    border: 2px solid #54abef;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
}
#Info {
    width: 100%;
    height: 100%;
}
</style>